"use client";

import { motion } from "framer-motion";
import { Card, CardContent } from "@/components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Quote } from "lucide-react";

const testimonials = [
  {
    id: 1,
    content: "我使用酷酷鱼竿的碳纤维超轻鱼竿已经一年了，它的轻便性和耐用性让我非常满意。即使长时间钓鱼也不会感到疲劳。",
    author: {
      name: "张伟",
      role: "专业钓鱼爱好者",
      avatar: "ZW",
    },
  },
  {
    id: 2,
    content: "多功能伸缩鱼竿是我旅行钓鱼的最佳选择。它不仅便于携带，而且性能出色。我已经向我的钓友们推荐了这款产品。",
    author: {
      name: "李娜",
      role: "休闲钓鱼爱好者",
      avatar: "LN",
    },
  },
  {
    id: 3,
    content: "作为一名海钓爱好者，我对酷酷鱼竿的海钓专业鱼竿非常满意。它的抗腐蚀性能和强大的抗拉能力让我能够轻松应对大型鱼类。",
    author: {
      name: "王强",
      role: "海钓专家",
      avatar: "WQ",
    },
  },
];

export function Testimonials() {
  return (
    <section className="py-12 md:py-20">
      <div className="container px-4 md:px-6">
        <motion.div
          className="flex flex-col items-center justify-center space-y-4 text-center"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
        >
          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">客户评价</h2>
          <p className="mx-auto mt-4 max-w-[700px] text-muted-foreground md:text-xl">
            听听我们的客户怎么说，他们的真实体验和反馈
          </p>
        </motion.div>

        <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3 mt-12">
          {testimonials.map((testimonial, index) => (
            <motion.div
              key={testimonial.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
            >
              <Card className="h-full">
                <CardContent className="p-6 flex flex-col h-full">
                  <Quote className="h-8 w-8 text-primary mb-4 opacity-70" />
                  <p className="flex-1 text-muted-foreground mb-6">{testimonial.content}</p>
                  <div className="flex items-center space-x-4">
                    <Avatar>
                      <AvatarFallback>{testimonial.author.avatar}</AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="text-sm font-medium">{testimonial.author.name}</p>
                      <p className="text-sm text-muted-foreground">{testimonial.author.role}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}